<template>
  <div>
    <p class="expect-title">近期最受期待</p>
    <div class="horizontal-container noscroll-bar">
      <div class="horizontal-scroll" :style="containerWidth">
        <div v-for="(item,index) in items" :key='index' class="horizontal-scroll-item" @click="gotoDetail(item.movieId)">
          <img :src="item.imgSrc" alt="">
          <div class="horizontal-scroll-item-toggle">
            <span></span>
          </div>
          <div class="horizontal-scroll-item-wanner">{{item.wannerNum}}人想看</div>
          <div class="horizontal-scroll-item-title">{{item.cname}}</div>
          <div class="horizontal-scroll-item-date">{{item.releaseDate}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import px2Vw from '@/utils/vw'
export default {
  props: {
    itemWidth: String,
    items: Array
  },
  computed: {
    containerWidth () {
      return {
        width: (px2Vw(196) * this.items.length) + 'vw'
      }
    }
  },
  methods: {
    gotoDetail () {
      this.$router.push()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../../styles/mixins/utils';
.expect-title{
  width: 100%;
  color: #333;
  padding: 20px 0 20px 30px;
}
.horizontal{
  &-container{
    width: 100%;
    overflow: scroll;
  }
  &-scroll{
    height: 350px;
    &-item{
      position: relative;
      width: 165px;
      height: 100%;
      margin-left: 30px;
      float: left;
      font-size: 26px;
      text-align: left;
      img{
        width: 100%;
        height: 230px;
      }
      &-wanner{
        width: 100%;
        position: absolute;
        left: 0;
        top: 190px;
        font-size: 12px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        color: #faaf00;
        @include utils-ellipsis;
        background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
      }
      &-toggle{
        width: 48px;
        height: 48px;
        line-height: 56px;
        background: rgba(61,63,71,.6);
        text-align: center;
        border-bottom-right-radius: 10px;
        position: absolute;
        top: 0;
        left: 0;
        span{
          display: inline-block;
          width: 25px;
          height: 25px;
          background-size: 100%;
          background-repeat: no-repeat;
          background-image:url();
        }
      }
      &-title{
        font-weight: bold;
        height: 53px;
        line-height: 53px;
        width: 100%;
        @include utils-ellipsis;
      }
      &-date{
        color: #999;
        height: 48px;
        line-height: 48px;
      }
    }
  }
}
</style>
